<template>
  <div class="apply-dialog">
    <div v-if="thisDiv === 1 || thisDiv === 2">
      <div class="title" style="display: flex;">
        <div style="flex: 1; text-align: left;padding-left: 30px;font-size: 25px;">
          {{ models.eventName }}
        </div>
        <div class="btn-list flex flex-row align-center">
          <el-button type="warning" size="mini" :loading="saveLoading" @click="saveAction">暂存</el-button>
          <el-button type="primary" size="mini" :loading="submitLoading" @click="submitAction">上报</el-button>
          <el-button type="info" size="mini" @click="handleClose">返回</el-button>
        </div>
      </div>
      <el-form
        ref="generateForm"
        label-suffix=":"
        size="small"
        :model="models"
        :rules="rules"
        label-position="right"
        label-width="130px"
      >
        <div >
          <title-info title="上报⼈信息" >
            <reporter-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事人信息" >
            <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事患者信息" >
            <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="事件信息" >
            <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="事件差错详情" >
            <div slot="left" style="display: flex; width: 100%; flex-wrap: wrap; ">
              <el-form-item label="饮⾷错误" prop="fooddrinkWrongTypeArr" label-width="150px">
                <el-checkbox-group v-model="models.fooddrinkWrongTypeArr">
                  <el-checkbox v-for="(item, index) in fooddrinkWrongTypeList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div style="width: 100%" />
              <el-form-item label="中毒表现" prop="poisoningActionArr" label-width="150px">
                <div style="display: flex; width: 100%">
                  <el-checkbox-group v-model="models.poisoningActionArr">
                    <el-checkbox v-for="(item, index) in poisoningActionList" :key="index" :label="item.value">
                      <div style="display: flex;align-items: center;">
                        <div style="display: flex;align-items: center;">
                          {{ item.label }}
                        </div>
<!--                        中毒表现呕吐次数-->
                        <el-input
                          v-if="models.poisoningActionArr && models.poisoningActionArr.indexOf('631')  > -1 && item.value === '631'"
                          :style="{ width: '200px', 'margin-left': '5px' }"
                          placeholder="请输入呕吐次数"
                          v-model="models.baqsjRecordDiagnosisDietWrong.poisoningActionVomitCount"
                        ><template slot="append">次</template></el-input>
<!--                        中毒表现发热度数-->
                        <el-input
                          v-if="models.poisoningActionArr && models.poisoningActionArr.indexOf('636')  > -1 && item.value === '636'"
                          :style="{ width: '200px', 'margin-left': '5px' }"
                          placeholder="请输入度数"
                          v-model="models.baqsjRecordDiagnosisDietWrong.poisoningActionFeverTemperature"
                        ><template slot="append">℃</template></el-input>
                        <!--        二维数据:腹泻物性状             -->
                        <div v-if="models.poisoningActionArr && models.poisoningActionArr.indexOf('633') > -1 && item.value === '633'" style="margin-left: 5px;display: flex;align-items: center;">
                          (
                          <el-input
                            :style="{ width: '200px' }"
                            placeholder="请输入腹泻次数"
                            v-model="models.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaCount"
                          ><template slot="append">次</template></el-input>
                          <label>(腹泻物性状:</label>
                          <el-checkbox-group v-model="models.poisoningActionDiarrhoeaTypeArr">
                            <el-checkbox v-for="(item, index) in poisoningActionDiarrhoeaTypeList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                          </el-checkbox-group>
                          <el-input
                            v-if="models.poisoningActionDiarrhoeaTypeArr && models.poisoningActionDiarrhoeaTypeArr.indexOf('13')  > -1 && item.value === '633'"
                            :style="{ width: '200px', 'margin-left': '5px', 'align-items': 'center' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaOther"
                          />
                          )
                          )
                        </div>
                      </div>
                    </el-checkbox>
                    <el-input
                      v-if="models.poisoningActionArr && models.poisoningActionArr.indexOf('642')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordDiagnosisDietWrong.poisoningActionOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </div>
          </title-info>
        </div>
        <div >
          <title-info title="处理措施" >
            <measure-one-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="其他信息说明" >
            <other-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
      </el-form>
    </div>
    <div v-if="thisDiv === 3"> >
        <div>
          <title-info title="上报⼈信息">
            <reporter-info slot="left" :form-data="models" :this-div="thisDiv" />
          </title-info>
        </div>
        <div>
          <title-info title="当事人信息">
            <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div>
          <title-info title="当事患者信息">
            <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div>
          <title-info title="事件信息">
            <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div>
          <title-info title="事件差错详情">
            <div slot="left">
              <table>
                <tr>
                  <td class="td-title">饮⻝错误</td>
                  <td>{{ getFoodDrinkWrongTypes(models.fooddrinkWrongTypeArr) || '' }}</td>
                  <td class="td-title">中毒表现</td>
                  <td>{{ getPoisoningActionTypes(models.poisoningActionArr) || '' }}</td>
                </tr>
              </table>
            </div>
          </title-info>
        </div>
        <div>
          <title-info title="处理措施">
            <measure-one-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div>
          <title-info title="其他信息说明">
            <other-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
    </div>
  </div>
</template>

<script>
import { doSaveDiagnosisDietWrong } from '@/api/report/reportForm'

import titleInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/titleInfo.vue'
import reporterInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/reporterInfo.vue'
import partyInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/partyInfo.vue'
import patientInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/patientInfo.vue'
import eventInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/eventInfo.vue'
import measureOneInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/measureOneInfo.vue'
import otherInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/otherInfo.vue'

export default {
  name: 'DiagnosisDietWrong',
  components: { titleInfo, reporterInfo, partyInfo, patientInfo, eventInfo, measureOneInfo, otherInfo },
  data() {
    return {
      // 当前显示的div：1 dialog 2 详情 3 处置
      thisDiv: 0,
      models: {},
      loading: false,
      dialogVisible: false,
      dialogDetailVisible: false,
      submitLoading: false,
      saveLoading: false,
      rules: {},
      poisoningActionList: [
        { value: '630', label: '恶⼼' },
        { value: '631', label: '呕吐' },
        { value: '632', label: '腹痛' },
        { value: '633', label: '腹泻' },
        { value: '634', label: '头痛' },
        { value: '635', label: '头晕' },
        { value: '636', label: '发热' },
        { value: '637', label: '脱⽔' },
        { value: '638', label: '抽搐' },
        { value: '639', label: '青紫' },
        { value: '640', label: '呼吸困难' },
        { value: '641', label: '昏迷' },
        { value: '642', label: '其他' }
      ],
      // 腹泻物性状
      poisoningActionDiarrhoeaTypeList: [
        { value: '10', label: '洗⾁⽔样' },
        { value: '11', label: '⽶泔⽔样' },
        { value: '12', label: '糊状' },
        { value: '13', label: '其他' }
      ],
      fooddrinkWrongTypeList: [
        { value: '610', label: '错误的饮⾷' },
        { value: '611', label: '错误的管饲量' },
        { value: '612', label: '错误的管饲液' },
        { value: '613', label: '错误的注⼊速度' },
        { value: '614', label: '错误的病⼈' },
        { value: '615', label: '错误的时间' },
        { value: '616', label: '错误的饮⾷类型' },
        { value: '617', label: 'NPO的病⼈进⾷' },
        { value: '618', label: '未及时发到病房' },
        { value: '619', label: '⾷物中毒' }
      ]
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible = false
      // 传到父组件
      this.$emit('close', val)
    },
    handleDetailClose() {
      this.dialogDetailVisible = false
    },
    // getDetail 方法改进
    getDetail(info) {
      this.models = {
        ...info,
        medicalInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.medicalInvolved) ? info.baqsjRecordHandle.medicalInvolved.split(',') : [],
        otherInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.otherInvolved) ? info.baqsjRecordHandle.otherInvolved.split(',') : [],
        fooddrinkWrongTypeArr: (info.baqsjRecordDiagnosisDietWrong && info.baqsjRecordDiagnosisDietWrong.fooddrinkWrongType) ? info.baqsjRecordDiagnosisDietWrong.fooddrinkWrongType.split(',') : [],
        poisoningActionArr: (info.baqsjRecordDiagnosisDietWrong && info.baqsjRecordDiagnosisDietWrong.poisoningAction) ? info.baqsjRecordDiagnosisDietWrong.poisoningAction.split(',') : [],
        poisoningActionDiarrhoeaTypeArr: (info.baqsjRecordDiagnosisDietWrong && info.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaType) ? info.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaType.split(',') : []
      };
      console.log(this.models);
    },
    editInfo(ruleInfo, info) {
      this.thisDiv = 2
      this.dialogVisible = true
      this.rules = ruleInfo
      this.getDetail(info)
    },
    detail(info) {
      this.thisDiv = 3
      this.dialogDetailVisible = true
      this.getDetail(info)
    },
    open(ruleInfo, modelInfo) {
      // 弹出框
      this.thisDiv = 1
      this.rules = ruleInfo
      this.models = {
        ...modelInfo,
        eventNo: 'DiagnosisDietWrong',
        eventName: '诊疗相关—饮食差错事件',
        // 其他复选框
        // 处理措施=>医疗介入：120-持续观察，121-加强护理防范，122-监测生命体征，123-伤口护理，124-给予额外关注(如：约束、注射治疗、药物治疗)，125-其他
        medicalInvolvedArr: [],
        //  处理措施=>其他介入：130-予以病人家属慰问及支持,131-移除与危害相关的设备或环境运作,32-上报警察机关,133-通报卫生主管机构,134-其他
        otherInvolvedArr: [],
        // 事件差错详情 => 对象类型 (不同的表单，定制不同)
        baqsjRecordDiagnosisDietWrong: {},
        // 事件差错详情 =>中毒表现 (不同的表单，定制不同)
        poisoningActionArr: [],
        // 事件差错详情 => 腹泻物性状 (不同的表单，定制不同)
        poisoningActionDiarrhoeaTypeArr: [],
        // 事件差错详情 => 饮⾷错误(不同的表单，定制不同)
        fooddrinkWrongTypeArr: []
      }
      this.dialogVisible = true
    },
    submitAction() {
      // 上报
      this.models.auditStatus = 2
      this.actionRequest()
    },
    saveAction(item) {
      // 草稿
      this.models.auditStatus = 1
      this.actionRequest()
    },
    actionRequest() {
      // 新增、编辑、暂存
      this.$refs['generateForm'].validate(valid => {
        if (valid) {
          this.$message({
            message: '正在操作请稍等...',
            type: 'warning'
          })
          this.saveLoading = true
          this.submitLoading = true
          this.models.baqsjRecordHandle.medicalInvolved = this.models.medicalInvolvedArr.join(',')
          this.models.baqsjRecordHandle.otherInvolved = this.models.otherInvolvedArr.join(',')

          this.models.baqsjRecordDiagnosisDietWrong.fooddrinkWrongType = this.models.fooddrinkWrongTypeArr.join(',')
          this.models.baqsjRecordDiagnosisDietWrong.poisoningAction = this.models.poisoningActionArr.join(',')
          this.models.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaType = this.models.poisoningActionDiarrhoeaTypeArr.join(',')

          doSaveDiagnosisDietWrong(this.models).then(res => {
            if (res.resStatus !== 500) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.saveLoading = false
              this.submitLoading = false
              // 关闭弹出框
              this.dialogVisible = false
              this.handleClose(1)
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
              this.saveLoading = false
              this.submitLoading = false
            }
          })
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    },
    getPoisoningActionTypes(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.poisoningActionList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '631') {
            labels.push(`${item.label}（${this.models.baqsjRecordDiagnosisDietWrong.poisoningActionVomitCount || 0}次）`);
          } else if (item.value === '636') {
            labels.push(`${item.label}（${this.models.baqsjRecordDiagnosisDietWrong.poisoningActionFeverTemperature || 0}℃）`);
          } else if (item.value === '633') {
            const diarrhoeaLabels = [];
            this.poisoningActionDiarrhoeaTypeList.forEach(diarrhoeaItem => {
              if (this.models.poisoningActionDiarrhoeaTypeArr && this.models.poisoningActionDiarrhoeaTypeArr.includes(diarrhoeaItem.value)) {
                if (diarrhoeaItem.value === '13') {
                  diarrhoeaLabels.push(`其他（${this.models.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaOther || ''}）`);
                } else {
                  diarrhoeaLabels.push(diarrhoeaItem.label);
                }
              }
            });
            labels.push(`${item.label}（${this.models.baqsjRecordDiagnosisDietWrong.poisoningActionDiarrhoeaCount || 0}次，腹泻物性状：${diarrhoeaLabels.join(', ')}）`);
          } else if (item.value === '642') {
            labels.push(`其他（${this.models.baqsjRecordDiagnosisDietWrong.poisoningActionOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getFoodDrinkWrongTypes(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.fooddrinkWrongTypeList.forEach(item => {
        if (values.includes(item.value)) {
          labels.push(item.label);
        }
      });
      return labels.join(', ');
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
